<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="日期">
                    <a-date-picker  popup-container="html"  v-model="query.queryDate" :style="{ width: '180px' }" placeholder="选择日期"
                        class="bacClass" />
                </a-form-item>
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
                <a-form-item label="机型">
                    <a-input allow-clear :style="{ width: '180px' }" class="bacClass" placeholder=""
                        v-model="query.machineTypeName" />
                </a-form-item>
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button v-if="infoType != 1" type="primary" @click="ListFans">返回</el-button>
                    <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
                    <el-button pain @click="exportExcel" plain>导出</el-button>
                    <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '88%', padding: '10px', overflow: 'aout' }" v-loading="loadings">
            <div style="width: 100%; height: 95%" v-if="infoType == 1">
                <a-tag color="#5e8af5">生产日报表</a-tag>
                <AgGridVuesCopys  :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                    style="height:75vh" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                    :columnDefs="tc" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
            <div style="width: 100%; height: 95%" v-if="infoType == 2">
                <a-tag color="#5e8af5">日明细</a-tag>
                <AgGridVuesCopys  :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2"
                    style="height:75vh" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList2"
                    :columnDefs="tc2" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
            <div style="width: 100%; height: 95%" v-if="infoType == 3">
                <a-tag color="#5e8af5">布明细</a-tag>
                <AgGridVuesCopys  :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady3"
                    style="height:75vh" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList3"
                    :columnDefs="tc3" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
        </div>
    </div>
</template>
    
<script lang="ts" setup>


import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { localeText } from '@/api/aggridZw'
import { exportStyleExcel } from '@/api/Export2StyleExcel'


const localeText1: any = ref(localeText)
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)


const infoType = ref(1)

const loadings = ref(false)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.companyId = corporateId
}

//getlist初始化接口参数
let query: any = reactive({
    queryDate: dayjs().format('YYYY-MM-DD'), //当月日期
    machineTypeName: '',
    companyId: null,
})

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const tableDataList2: any = ref([])
const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}
const tableDataList3: any = ref([])
const gridOption3 = ref()
const gridReady3 = (params: any) => {
    gridOption3.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const tc = [
    {
        headerName: '公司',
        field: 'company',
        width: 160,
    },
    {
        headerName: '机型',
        field: 'machineTypeName',
        width: 160
    },
    {
        headerName: '月分析',
        children: [
            {
                headerName: '目标',
                field: 'monthlyGoalMonth',
                width: 160
            },
            {
                headerName: '入库',
                field: 'greyStockInMonthWeight',
                width: 160
            },
            {
                headerName: '验布累计',
                field: 'checkClothMonthWeight',
                width: 160
            },
            {
                headerName: '生产达成',
                field: 'produceReachMonth',
                width: 160
            },
            {
                headerName: '疵布累计',
                field: 'secondClothMonthWeight',
                width: 160
            },
            {
                headerName: '疵布率',
                field: 'secondClothMonthRate',
                width: 160
            },
            {
                headerName: '降等累计',
                field: 'downGradeMonthWeight',
                width: 160
            },
            {
                headerName: '降等率',
                field: 'downGradeMonthRate',
                width: 160
            },
        ]
    },
    {
        headerName: '日分析',
        children: [
            {
                headerName: '当日目标',
                field: 'monthlyGoalDay',
                width: 160,
                cellRenderer: {
                    template: `
                                <span style="color: blue;" @click="b">{{a}}</span>
                            `,
                    setup(props: any) {
                        const a = ref(props.params.data.monthlyGoalDay)
                        const b = () => {
                            try {
                                infoType.value = 2
                                selectJt2()
                            } catch (error) {
                                return
                            }
                        }
                        return {
                            a,
                            b
                        }
                    }
                }
            },
            {
                headerName: '当日落布重量',
                field: 'fallClothDayWeight',
                width: 160
            },
            {
                headerName: '当日验布重量',
                field: 'checkClothDayWeight',
                width: 160
            },
            {
                headerName: '入库重量',
                field: 'greyStockInDayWeight',
                width: 160
            },
            {
                headerName: '疵布重量',
                field: 'secondClothDayWeight',
                width: 160
            },
            {
                headerName: '疵布转数',
                field: 'secondRevolutionWeight',
                width: 160
            },
            {
                headerName: '疵布率',
                field: 'secondClothDayRate',
                width: 160
            },
            {
                headerName: '降等重量',
                field: 'downGradeDayWeight',
                width: 160
            },
            {
                headerName: '降等率',
                field: 'downGradeDayRate',
                width: 160
            },
        ]
    },
]
const tc2 = [
    {
        headerName: '公司',
        field: 'company',
        width: 160,
    },
    {
        headerName: '机型',
        field: 'machineTypeName',
        width: 160
    },
    {
        headerName: '楼层',
        field: 'areaName',
        width: 160
    },
    {
        headerName: '班次',
        field: 'shift',
        width: 160,
        cellRenderer: {
            template: `<span >{{a}}</span>`,
            setup(props: any) {
                return {
                    a: props.params.data.shift == 0 ? '白班' : '晚班'
                }
            }
        }
    },
    {
        headerName: '月分析',
        children: [
            {
                headerName: '目标',
                field: 'monthlyGoalMonth',
                width: 160
            },
            {
                headerName: '入库',
                field: 'greyStockInMonthWeight',
                width: 160
            },
            {
                headerName: '生产达成',
                field: 'produceReachMonth',
                width: 160
            },
            {
                headerName: '疵布累计',
                field: 'secondClothMonthWeight',
                width: 160
            },
            {
                headerName: '疵布率',
                field: 'secondClothMonthRate',
                width: 160
            },
            {
                headerName: '降等累计',
                field: 'downGradeMonthWeight',
                width: 160
            },
            {
                headerName: '降等率',
                field: 'downGradeMonthRate',
                width: 160
            },
        ]
    },
    {
        headerName: '日分析',
        children: [
            {
                headerName: '当日目标',
                field: 'monthlyGoalDay',
                width: 160,
                cellRenderer: {
                    template: `
                                <span style="color: blue;" @click="b">{{a}}</span>
                            `,
                    setup(props: any) {
                        const a = ref(props.params.data.monthlyGoalDay)
                        const b = () => {
                            try {
                                infoType.value = 3
                                selectJt3()
                            } catch (error) {
                                return
                            }
                        }
                        return {
                            a,
                            b
                        }
                    }
                }
            },
            {
                headerName: '当日落布重量',
                field: 'fallClothDayWeight',
                width: 160
            },
            {
                headerName: '当日验布重量',
                field: 'checkClothDayWeight',
                width: 160
            },
            {
                headerName: '入库重量',
                field: 'greyStockInDayWeight',
                width: 160
            },
            {
                headerName: '疵布重量',
                field: 'secondClothDayWeight',
                width: 160
            },
            {
                headerName: '疵布转数',
                field: 'secondRevolutionWeight',
                width: 160
            },
            {
                headerName: '疵布率',
                field: 'secondClothDayRate',
                width: 160
            },
            {
                headerName: '降等重量',
                field: 'downGradeDayWeight',
                width: 160
            },
            {
                headerName: '降等率',
                field: 'downGradeDayRate',
                width: 160
            },
        ]
    },
]

const tc3 = [
    {
        headerName: '公司',
        field: 'company',
        width: 160,
    },
    {
        headerName: '机型',
        field: 'machineTypeName',
        width: 160
    },
    {
        headerName: '楼层',
        field: 'areaName',
        width: 160
    },
    {
        headerName: '机台编号',
        field: 'machineCode',
        width: 160
    },
    {
        headerName: '班次',
        field: 'shift',
        width: 160,
        cellRenderer: {
            template: `<span >{{a}}</span>`,
            setup(props: any) {
                return {
                    a: props.params.data.shift == 0 ? '白班' : '晚班'
                }
            }
        }
    },
    {
        headerName: '坯布编号',
        field: 'greyCode',
        width: 160
    },
    {
        headerName: '坯布名称',
        field: 'greyName',
        width: 160
    },
    {
        headerName: '织布单号',
        field: 'planOrderCode',
        width: 160
    },
    {
        headerName: '日分析',
        children: [
            {
                headerName: '当日目标',
                field: 'monthlyGoalDay',
                width: 160
            },
            {
                headerName: '当日落布重量',
                field: 'downGradeDayWeight',
                width: 160
            },
            {
                headerName: '当日验布重量',
                field: 'checkClothDayWeight',
                width: 160
            },
            {
                headerName: '入库重量',
                field: 'greyStockInDayWeight',
                width: 160
            },
            {
                headerName: '疵布重量',
                field: 'secondClothDayWeight',
                width: 160
            },
            {
                headerName: '疵布转数',
                field: 'secondRevolutionWeight',
                width: 160
            },
            {
                headerName: '疵布率',
                field: 'secondClothDayRate',
                width: 160
            },
            {
                headerName: '降等重量',
                field: 'downGradeDayWeight',
                width: 160
            },
            {
                headerName: '降等率',
                field: 'downGradeDayRate',
                width: 160
            },
        ]
    },
]


//初始化
onMounted(async () => {
    selectJt()
})

function selectJt() {
    loadings.value = true
    post({
        url: 'planSingle/ProduceDayReport/getReportOne',
        data: {
            "companyId": query.companyId,
            "machineTypeName": query.machineTypeName,
            "queryDate": query.queryDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            // a.concat(b)
            tableDataList.value = res.data
            loadings.value = false
        } else {
            loadings.value = false
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}
function selectJt2() {
    loadings.value = true
    post({
        url: 'planSingle/ProduceDayReport/getReportTwo',
        data: {
            "companyId": query.companyId,
            "machineTypeName": query.machineTypeName,
            "queryDate": query.queryDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList2.value = res.data
            loadings.value = false
        } else {
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}


function selectJt3() {
    loadings.value = true
    post({
        url: 'planSingle/ProduceDayReport/getReportThree',
        data: {
            "companyId": query.companyId,
            "machineTypeName": query.machineTypeName,
            "queryDate": query.queryDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList3.value = res.data
            loadings.value = false
        } else {
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}

const getList = () => {
    if (!query.queryDate) {
        Message.error('日期必填')
        return
    }
    switch (infoType.value) {
        case 1:
            selectJt()
            break
        case 2:
            selectJt2()
            break
        case 3:
            selectJt3()
            break

    }
}
const ListFans = () => {
    if (infoType.value != 1) {
        infoType.value = infoType.value - 1
    }
}


const exportExcel = () => {
    let tcs, tscList,tcSting;
    switch (infoType.value) {
        case 1:
            tcs = tc
            tscList = tableDataList.value
            tcSting = '生产日报表.xlsx'
            break
        case 2:
            tcs = tc2
            tscList = tableDataList2.value
            tcSting = '日明细.xlsx'
            break
        case 3:
            tcs = tc3
            tscList = tableDataList3.value
            tcSting = '布种明细.xlsx'
            break

    }
    exportExcel_xlsx(tcs,tscList,tcSting)
}

function exportExcel_xlsx(tcs:any,tscList:any,tcSting:any){
    let header = tcs.map((o: any) => {
        if (o.children) {
            return o.children.map(z => z.headerName)
        } else {
            return o.headerName
        }
    });
    let filterCols = tcs.map((c: any) => {
        if (c.children) {
            return c.children.map(z => z.field)
        } else {
            return c.field
        }
    });

    header = flatten(header);
    filterCols = flatten(filterCols);

    console.log(header)
    console.log(filterCols)
    let data = formatJson(filterCols, tscList);
    console.log(data)
    exportStyleExcel({ header, data, filename: tcSting })
}

function flatten(arr) {
    return [].concat(...arr.map(x =>
        Array.isArray(x) ? flatten(x) : x
    ))
}
const formatJson = (filterVal: any, jsonData: any) => {
    return jsonData.map(v => filterVal.map(j => {
        if (v[j] == null) {
            console.log(j);
            console.log(v[j]);
            return '';
        }
        if (j == 'shift') {
            if (v[j] == 1) {
                return '晚班';
            } else {
                return '白班';
            }
        } else {
            if (j) { return v[j] }
        }
    }))
}
</script>
<style scoped>
.contioner {
    height: 200%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
    